<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">

        <ui:define name="body">

            <style>
                .main-content{
                    width: 100% !important;
                    margin-top: -20px;
                }
            </style>


            <h:form id="mapaForm" enctype="multipart/form-data" style="width: 100%">

                <p:panel style="height: 2px;"  rendered="#{!managerLayout.desabilitarMapa() and managerMapaLocalidade.connect}" >
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                </p:panel>

                <div class="buttonAction" style="float: right; margin-right: 15px">
                    <!--                    <p:commandButton value="Adicionar" icon="ui-icon-circle-plus" styleClass="ui-priority-primary"
                                                         process=":mapaForm:tipoMapaAdicionar, @this" disabled="{!managerMapaLocalidade.desabilitarAdicionar}"
                                                         onstart="getTipoMapa()" rendered="{managerMapaLocalidade.habilitarBotaoInfoWindow()}"
                                                         update="@form" actionListener="{managerMapaLocalidade.habilitarAdicionar()}">
                                        </p:commandButton>-->
                    <h:inputHidden id="tipoMapaAdicionar" value="#{managerMapaLocalidade.tipoMapa}" />
                </div>

                <h3 class="title">Mapa Localidade</h3>
                <p:growl id="messages" showDetail="false" autoUpdate="true"  /> 

                <p:panel id="geoPanel" style="width: 102.25% !important; margin-left: -19px" 
                         styleClass="container_24 clearfix">

                    <p:gmap id="map" center="#{managerMapaLocalidade.centroMapa}" 
                            zoom="#{managerMapaLocalidade.zoomLevelMapa}" 
                            type="#{managerMapaLocalidade.tipoMapa}"
                            rendered="#{managerMapaLocalidade.connect and !managerLayout.desabilitarMapa()}"
                            style="width:100%;height:500px" model="#{managerMapaLocalidade.mapModel}">

                        <p:ajax event="stateChange" listener="#{managerMapaLocalidade.onStateChange}"/>

                        <p:ajax event="pointSelect" listener="#{managerMapaLocalidade.handlePointClick}"
                                disabled="#{managerMapaLocalidade.desabilitarAdicionar}"
                                onsuccess="dlg.show()" oncomplete="getTipoMapa();"/>

                        <p:ajax event="overlaySelect" listener="#{managerMapaLocalidade.onMarkerSelect}"/>

                        <p:gmapInfoWindow id="infoWindow" maxWidth="300">
                            <p:outputPanel style="text-align: center; display: block; margin: auto; width: 200px !important; height: 100px"
                                           rendered="#{managerMapaLocalidade.localidade.anexo.id ne null}">

                                <div class="my-simple-gallery" >
                                    <ui:repeat value="#{managerMapaLocalidade.localidade.anexo}" var="a">
                                        <figure itemprop="associatedMedia" class="grid_24" onclick="initPhoto(); desabilitaEdicaoImagem();">
                                            <a href="#{managerImagem.urlImagem(a)}" 
                                               itemprop="contentUrl" data-size="#{managerImagem.widthHeight(a)}"
                                               pid="#{a.id}">
                                                <img src="#{managerImagem.urlThumbnailImagem(a)}" width="220"
                                                     itemprop="thumbnail" class="image"/>
                                            </a>
                                            <figcaption itemprop="caption description"></figcaption>
                                        </figure>
                                    </ui:repeat>
                                </div>
                            </p:outputPanel>

                            <p:outputPanel style="text-align: left; display: block; margin: auto; width: auto !important; height: auto">
                                <div class="clear"/>
                                <h:outputText value="Nome: #{managerMapaLocalidade.localidade.nome}"/>
                                <div class="clear"/>
                                <h:outputText value="Logradouro: #{managerMapaLocalidade.localidade.logradouro}" style="white-space: pre-wrap;"/>
                                <div class="clear"/>
                                <h:outputText value="Bairro: #{managerMapaLocalidade.localidade.bairro.nome}"/>
                                <div class="clear"/>
                                <h:outputText value="Telefone: #{managerMapaLocalidade.localidade.telefone}"/>

                                <div class="buttonAction" style="float: none">
                                    <p:commandButton value="Editar" icon="ui-icon-pencil" update=":dialog"
                                                     rendered="#{managerMapaLocalidade.habilitarBotaoInfoWindow()}"
                                                     actionListener="#{managerMapaLocalidade.editar()}">
                                    </p:commandButton>
                                    <p:commandButton value="Excluir" icon="ui-icon-trash"
                                                     rendered="#{managerMapaLocalidade.habilitarBotaoInfoWindow()}"
                                                     onclick="excluirDialog.show()"/>
                                </div>

                            </p:outputPanel>
                        </p:gmapInfoWindow>

                    </p:gmap>

                    <p:outputLabel style="margin-left: 50px" value="O Georreferenciamento foi desabilitado pois não foi possível estabelecer uma conexão com a Internet !"
                                   rendered="#{!managerLayout.desabilitarMapa() and !managerMapaLocalidade.connect}"/>

                    <p:outputLabel style="margin-left: 50px" value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                   rendered="#{managerLayout.desabilitarMapa()}"/>

                </p:panel>

            </h:form>

            <p:dialog id="dialog" widgetVar="dlg" showEffect="fade" width="1030" 
                      resizable="false" closable="false" modal="true" closeOnEscape="true">
                <h:form id="dlgForm" prependId="false">

                    <p:panel id="dlgPanel" styleClass="container_24 clearfix " 
                             style="border-left: none;
                             border-top: none;
                             border-right: none;
                             float: left;
                             height: 364px;
                             width: 454px !important;">

                        <fieldset style="width: 100%"><legend>Dados gerais</legend>

                            <div style="margin-top: 35px" />
                            <p:outputLabel for="title" value="Nome" styleClass="grid_5"/>
                            <p:inputText id="title" required="true"  
                                         style="margin-left: 12px !important;"
                                         value="#{managerMapaLocalidade.localidade.nome}" styleClass="grid_18"/>
                            <div class="clearfix"/>

                            <p:outputLabel for="tipoLocal" value="Tipo" styleClass="grid_5"/>
                            <div class="grid_18" style="margin-left: 12px !important;">
                                <p:selectOneMenu id="tipoLocal" panelStyle="width:150px;" required="true"
                                                  
                                                 value="#{managerMapaLocalidade.localidade.tipoLocal}">  
                                    <f:selectItem itemLabel="" itemValue="" />
                                    <f:selectItems value="#{managerMapaLocalidade.tipoLocal}" var="item" itemLabel="#{item.nome}" itemValue="#{item}"/>  
                                </p:selectOneMenu> 
                            </div>
                            <div class="clear"/>

                            <p:outputLabel for="bairro" value="Bairro" styleClass="grid_5"/>
                            <p:autoComplete id="bairro" styleClass="grid_18 autoCompleteBairro" dropdown="true" converter="bairroconverter"
                                            var="bairro" itemLabel="#{bairro.nome.toString()}" minQueryLength="3"
                                            style="margin-left: 12px !important;"
                                            itemValue="#{bairro}" value="#{managerMapaLocalidade.localidade.bairro}"
                                            scrollHeight="200" forceSelection="true" required="true"  
                                            completeMethod="#{managerUtilitario.autocompleteBairroPorCidade}"/>
                            <div class="clearfix"/>

                            <p:outputLabel for="logradouro" value="Logradouro" styleClass="grid_5"/>
                            <p:inputText id="logradouro" style="margin-left: 12px !important;"
                                         value="#{managerMapaLocalidade.localidade.logradouro}" styleClass="grid_18"/>
                            <div class="clearfix"/>

                            <p:outputLabel for="telefone" value="Telefone" styleClass="grid_5"/>
                            <p:inputText id="telefone" style="margin-left: 12px !important;"
                                         styleClass="grid_18" value="#{managerMapaLocalidade.localidade.telefone}"/>
                        </fieldset>
                    </p:panel>

                    <p:panel id="documentoPanel" styleClass="container_24 clearfix"
                             style="float: right; width: 490px; border-bottom: none; border-top: none; border-right: none ">

                        <p:tabView id="tabView" orientation="top" 
                                   style="border-width: 0 !important; margin-top: -20px" 
                                   dynamic="true" activeIndex="#{managerMapaLocalidade.activeTabIndex}" cache="false">

                            <p:tab title="Anexo">

                                <p:panel styleClass="grid_20">
                                    <div class="my-simple-gallery" style="margin-left: 40px">
                                        <ui:repeat value="#{managerMapaLocalidade.localidade.anexo}" var="a">
                                            <div>
                                                <figure itemprop="associatedMedia" onclick="initPhoto(); habilitaEdicaoImagem();">
                                                    <a href="#{managerImagem.urlImagem(a)}" 
                                                       itemprop="contentUrl" data-size="#{managerImagem.widthHeight(a)}" pid="#{a.id}">
                                                        <img src="#{managerImagem.urlThumbnailImagem(a)}" 
                                                             style="width:240px!important;height:240px !important; margin-left: 45px !important"
                                                             itemprop="thumbnail" class="image"/>
                                                    </a>
                                                    <figcaption itemprop="caption description"></figcaption>
                                                </figure>
                                            </div>
                                        </ui:repeat>
                                    </div>

                                    <div class="buttonAction">
                                        <p:commandButton id="restaurarButton" alt="Restaurar" style="top: -36px; left: -56px;"
                                                         icon="ui-icon-newwin" update=":dlgForm:documentoPanel"
                                                         rendered="#{managerMapaLocalidade.localidade.anexo.editado and managerMapaLocalidade.localidade.anexo.id ne null}"
                                                         onclick="dlgRestImagem.show()">
                                            <f:setPropertyActionListener target="#{managerImagem.idAnexo}" value="#{managerMapaLocalidade.localidade.anexo.id}"/>
                                        </p:commandButton>
                                        <p:commandButton id="removeButton" alt="Remover" value="Remover"
                                                         process=":dlgForm:documentoPanel"
                                                         icon="ui-icon-trash" update=":dlgForm:documentoPanel"
                                                         disabled="#{managerMapaLocalidade.desabilitarBotaoRemover()}"
                                                         style="margin-left: 220px" 
                                                         actionListener="#{managerMapaLocalidade.removerAnexo()}" />
                                        <p:fileUpload
                                            mode="advanced"
                                            label="Anexar"
                                            uploadLabel="Enviar"
                                            cancelLabel="Cancelar"
                                            fileUploadListener="#{managerMapaLocalidade.adicionarAnexo}"
                                            multiple="false" 
                                            auto="true" styleClass="fileUpload"
                                            allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                            dragDropSupport="true"
                                            invalidFileMessage="Tipo de arquivo não suportado."
                                            invalidSizeMessage="Tamanho do arquivo não é suportado"
                                            immediate="true"
                                            update=":dlgForm:documentoPanel"/>
                                    </div>
                                </p:panel>
                            </p:tab>

                            <p:tab title="Mapa" rendered="#{managerMapaLocalidade.localidade.id ne null}">
                                <p:gmap id="map" center="#{managerMapaLocalidade.centroMapaEditar}" 
                                        zoom="#{managerMapaLocalidade.zoomLevelMapa}" type="ROADMAP"
                                        rendered="#{!managerLayout.desabilitarMapa() and managerMapaLocalidade.connect}"
                                        style="width:100%; height:290px;" model="#{managerMapaLocalidade.mapModelEditar}">

                                    <p:ajax event="stateChange" listener="#{managerMapaLocalidade.onStateChangeEditar}"/>
                                    <p:ajax event="markerDrag" listener="#{managerMapaLocalidade.onMarkerDragEditar}" oncomplete="getTipoMapa()"/>
                                </p:gmap>

                                <p:outputLabel value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                               rendered="#{managerLayout.desabilitarMapa()}"/>
                            </p:tab>
                        </p:tabView>

                    </p:panel>

                    <p:hotkey bind="escape" actionListener="#{managerMapaLocalidade.cancelar()}"
                              update="@form, :mapaForm" oncomplete="dlg.hide()"/>

                    <h:inputHidden id="tipoMapa" value="#{managerMapaLocalidade.tipoMapa}"/>

                    <div class="buttonAction" style="float: none">
                        <hr style="width: 100%; float: left;"/>
                        <div class="clear-both"/>
                        <p:commandButton value="Salvar" icon="ui-icon-disk" styleClass="ui-priority-primary"
                                         actionListener="#{managerMapaLocalidade.gravar()}" update="tabView, @form, :mapaForm"
                                         oncomplete="dlg.hide()"/>

                        <p:commandButton value="Cancelar" icon="ui-icon-trash"
                                         actionListener="#{managerMapaLocalidade.cancelar()}"
                                         process="@this, tipoMapa"
                                         onstart="getTipoMapa()"
                                         update="@form, :mapaForm" oncomplete="dlg.hide()"/>
                    </div>
                </h:form>
            </p:dialog>

            <p:dialog id="confirmarExclusaoDialog" widgetVar="excluirDialog" modal="true" 
                      height="80" closable="true" resizable="false" >
                <h:form id="excluirDlgForm" prependId="false">

                    <h:outputText value="Tem certeza que deseja remover esta localidade ?" />
                    <h:inputHidden id="tipoMapaExcluir" value="#{managerMapaLocalidade.tipoMapa}" />

                    <div class="buttonAction">
                        <p:commandButton value="Sim"
                                         actionListener="#{managerMapaLocalidade.excluir()}"
                                         update=":mapaForm" icon="ui-icon-check"
                                         oncomplete="excluirDialog.hide()" />
                        <p:commandButton value="Não" icon="ui-icon-close"
                                         process="@this, tipoMapaExcluir"
                                         oncomplete="excluirDialog.hide()" />
                    </div>

                </h:form>

            </p:dialog>

            <script language="JavaScript" type="text/javascript">
                function getTipoMapa(){
                    var mapa = widget_mapaForm_map.map.mapTypeId;
                                      
                    $("#tipoMapa").val(mapa);
                    $("#mapaForm\\:tipoMapaAdicionar").val(mapa);
                    
                };
            </script>

        </ui:define>
    </ui:composition>

</html>
